<template>
  <el-container style="height: 100vh">
    <el-header style="background: #409EFF; color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <span style="font-weight: bold; margin-right: 40px;">员工薪资管理系统</span>
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          background-color="#409EFF"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          style="flex: 1; border-bottom: none; background: transparent;"
        >
          <el-menu-item index="/users">员工管理</el-menu-item>
          <el-menu-item index="/departments">部门管理</el-menu-item>
          <el-menu-item index="/positions">职位管理</el-menu-item>
          <el-menu-item index="/salaries">薪资管理</el-menu-item>
        </el-menu>
      </div>
      <div v-if="userStore.isLogin" style="display: flex; align-items: center;">
        <el-tag type="info" style="margin-right: 16px;">{{ userStore.user.name }}（{{ userStore.user.role === 'ADMIN' ? '管理员' : '员工' }}）</el-tag>
        <el-button size="small" @click="logout" type="danger">退出登录</el-button>
      </div>
    </el-header>
    <el-main style="background: #f5f6fa; padding: 24px;">
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { useUserStore } from './store/user'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const activeMenu = computed(() => {
  // 只高亮一级菜单
  return '/' + (route.path.split('/')[1] || 'users')
})
function logout() {
  userStore.logout()
  router.replace('/login')
}
</script>

<style>
body {
  margin: 0;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
</style>
